<template>
  <el-card>
    <div class="df jcsb aic" slot="header">
      <span>商品分类</span>
      <el-button @click="dialogFormVisible = true" type="primary"
        >添加分类</el-button
      >
    </div>

    <!-- 表格 -->
    <el-table :data="tableData">
      <!-- 序号 -->
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="分类名称" prop="cateName">
        <template slot-scope="scope">
          <span v-if="!scope.row.isEdit">{{ scope.row.cateName }}</span>
          <el-input v-else v-model="scope.row.cateName"></el-input>
        </template>
      </el-table-column>
      <!-- 是否启用 -->
      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <el-switch
            :disabled="!scope.row.isEdit"
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <!-- 操作 -->

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="default"
            size="mini"
            v-if="!scope.row.isEdit"
            @click="scope.row.isEdit = !scope.row.isEdit"
            >编译</el-button
          >
          <el-button
            v-else
            type="success"
            size="mini"
            @click="handleEdit(scope.row)"
            >完成</el-button
          >
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="nation-box">
      <el-pagination
        background=""
        class="nation"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 对话框 -->
    <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="分类名称" label-width="120px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开关" label-width="120px">
          <el-switch
            v-model="form.value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
// 获取商品类别接口
import {
  getGoodsCateReq,
  goodsAddCateReq,
  goodsEditcateReq,
} from "@/api/goods";

export default {
  data() {
    return {
      form: {
        name: "",
        value: true,
      },
      currentPage: 1,
      pageSize: 5,
      total: 0,
      // 表格分类数据
      tableData: [],
      // 对话框显示与否
      dialogTableVisible: false,
      dialogFormVisible: false,
      // 对话框宽度
    };
  },

  methods: {
    // 获取分页函数
    async getData() {
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      // 发送请求
      let res = await getGoodsCateReq({
        currentPage,
        pageSize,
      });
      // 解构数据
      let { total, data } = res.data;
      console.log(data);
      // this.tableData = data;
      // 修改数据
      data.forEach((v) => {
        // 把state转换为布尔值
        v.state = v.state === 1 ? true : false;
        /*  添加一个字段，决定是否可编辑，初始化不
         可编辑，为false，只有点击编辑时才为true
         */
        v.isEdit = false;
      });
      this.tableData = data;

      // 数据赋值
      this.total = total;
      console.log(this.tableData);
      // console.log("data", data);
      // 如果获取的data为[]，且currentPage>1，就退回上一页
      if (data.length === 0 && this.currentPage !== 1) {
        this.currentPage--;
        this.getData();
      }
    },

    // 添加分类
    async add() {
      let state = this.form.value ? 1 : 0;
      let res = await goodsAddCateReq({
        cateName: this.form.name,
        state,
      });
      let { code, msg } = res.data;
      if (code === 0) {
        this.dialogFormVisible = false;
        this.getData();
      }
    },
    // 页码
    handleSizeChange(val) {
      // 1 获取当前每页 条数
      this.pageSize = val;
      // 2 拉去数据
      this.getData();
    },
    handleCurrentChange(val) {
      // 1 获取当前页面 赋值
      this.currentPage = val;
      // 2 发请求
      this.getData();
    },

    // 删除
    handleDelete() {
      console.log(666);
    },
    // 编辑
    async handleEdit(row) {
      let state = row.state ? 1 : 0;
      let res = await goodsEditcateReq({...row,state});
      row.isEdit = !row.isEdit;
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
</style>